<template>
    <div class="goods-page" id='goods-page'>
        <!-- 顶部搜索栏 -->
        <search-sub ref="search"></search-sub>
        <div class="main">
            <div class="wrap" v-if="showPage">
                <!-- 商品信息 -->
                <sku-data :goods="goodsDetailInfo" @toUpdateCartNum="toUpdateCartNum"></sku-data>
                <div class="bottom-wrap">
                    <!-- 推荐商品 -->
                    <div class="tui-wrap">
                        <div class="tui-con">
                            <h2 class="flex-center goods-base-title">推荐商品</h2>
                            <div class="menu-list" v-if="goodsDetailInfo.rel_goods_id">
                                <div v-for="(item,index) in goodsDetailInfo.rel_good_arr" :key="index" @click="toGoodsDetail(item.goods_id)"
                                     class="menu-goods-item">
                                    <goods-item :item="item"></goods-item>
                                </div>
                            </div>
                            <el-empty description="暂无推荐商品" v-else></el-empty>
                        </div>
                    </div>
                    <!-- 商品详情 -->
                    <div class="goods-detail-wrap">
                        <h2 class="flex-center goods-base-title">商品详情</h2>
                        <div v-html="goodsDetailInfo.content" class="content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    goodsDetail
} from '../../api/goods'
import SearchSub from "@/components/SearchSub.vue";
import GoodsItem from "@/components/GoodsItem.vue";
import SkuData from "./components/SkuData.vue";

// import https from "@/utils/https.js";
export default {
    components: {
        SearchSub,
        GoodsItem,
        SkuData,
    },
    data() {
        return {
            showPage: false,
            goodsId: '',
            goodsDetailInfo: {},
        }
    },
    created() {
        console.log('this.$route.query', this.$route.query)
        this.goodsId = this.$route.query.goods_id;
        this.getGoodsInfo()
    },
    methods: {
        getGoodsInfo() {
            const that = this;
            goodsDetail({
                goods_id: that.goodsId
            }).then(res => {
                that.showPage = true;
                if (res.code == 0) {
                    that.goodsDetailInfo = res.data;
                    console.log('goodsDetailInfo', that.goodsDetailInfo)
                }
            })
        },
        toUpdateCartNum(){
            this.$refs.search.getCartTotal();
        },
        toGoodsDetail(id) {
            const href = this.$router.resolve({
                path: `/goods_detail`,
                query: { goods_id: id },
            }).href;
            window.open(href, "_blank");
        }
    },
};
</script>

<style lang="scss" scoped>
.goods-page {
    min-height: 100%;
    background: #fff;
}
.main {
    width: 100%;
}
// 选择规格,商品信息部分
.goods-info-wrap {
    width: 100%;
    padding: 24px 12px 30px;
    box-sizing: border-box;

    .goods-img {
        width: 450px;
        height: 450px;
        flex-shrink: 0;
        margin-right: 24px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right-goods-info {
        p {
            font-size: 22px;
        }

        .goods-price-wrap {
            width: 426px;
            height: 98px;
            background: #30b30e;
            border-radius: 13px;
            margin-top: 20px;

            h2 {
                font-size: 20px;
                color: #ffffff;
                padding-left: 10px;
                padding-top: 10px;
            }

            .goods-price {
                width: 418px;
                height: 52px;
                align-items: center;
                background: #ffffff;
                border-radius: 8px;
                margin: 4px auto 0;

                p {
                    font-size: 24px;
                    color: #ff5040;
                    text-stroke: 0px #ff5040;
                    margin-right: 10px;
                }

                span {
                    width: 112px;
                    height: 29px;
                    background: #30b30e;
                    border-radius: 15px;
                    color: #fff;
                }
            }
        }

        .attr-name {
            width: 56px;
            height: 36px;
            display: flex;
            align-items: center;
            font-size: 14px;
            flex-shrink: 0;
            margin-right: 20px;
        }

        .attr-info-wrap {
            margin-top: 25px;

            .attr-item {
                display: flex;
                margin-bottom: 20px;

                .attr {
                    display: flex;
                    flex-wrap: wrap;

                    .attr-btn {
                        min-width: 76px;
                        height: 36px;
                        padding: 0 10px;
                        box-sizing: border-box;
                        background: rgba(0, 0, 0, 0.06);
                        border: 1px solid transparent;
                        border-radius: 6px;
                        margin-right: 10px;
                        margin-bottom: 10px;
                        cursor: pointer;
                        &:last-of-type {
                            margin-right: 0;
                        }
                        &:hover {
                            background: rgba(0, 0, 0, 0.1);
                        }
                    }
                    .attr-btn-act {
                        background: #fff7f3;
                        border: 1px solid #ff5000;
                        color: #ff5000;
                    }
                }
            }
        }

        .number-box-wrap {
            .number-box {
                width: 130px;
                height: 36px;
                align-items: center;
                border-radius: 6px;
                border: 1px solid #d8d8d8;

                .handles {
                    width: 36px;
                    height: 36px;

                    img {
                        width: 10px;
                        height: 10px;
                    }
                }

                .input-box {
                    width: 58px;
                    height: 36px;

                    input {
                        width: 100%;
                        height: 100%;
                        font-size: 14px;
                        text-align: center;
                    }
                }
            }
        }

        .goods-handle-wrap {
            align-items: center;
            margin-top: 32px;

            .add-cart {
                width: 289px;
                height: 53px;
                background: #30b30e;
                border-radius: 27px;
                color: #fff;
                font-size: 22px;
                margin-right: 40px;
            }

            .collect {
                font-size: 14px;
                color: #8f8f8f;

                p {
                    font-size: 14px;
                }
            }
        }
    }
}

.goods-base-title {
    width: 100%;
    height: 44px;
    font-size: 20px;
}
.bottom-wrap {
    display: flex;
    padding-bottom: 50px;
}

.tui-wrap {
    width: 252px;
    flex-shrink: 0;
    margin-right: 12px;
    .tui-con{
        width: 100%;
        min-height: 300px;
        padding: 0 12px 20px;
        box-sizing: border-box;
        background: #f2f2f2;
    }
    .menu-goods-item {
        margin-top: 24px;
    }
}
.goods-detail-wrap {
    flex: 1;
    .goods-base-title {
        background: var(--main-color);
        color: #fff;
    }
    .content {
        width: 100%;
        img {
            width: 100%;
            display: block;
        }
    }
}
</style>